<template>
  <div>
    <!-- 评论框 -->
    <div style="margin-bottom: 40px">
      <div class="comment-head">
        <i class="el-icon-edit-outline" style="font-weight: bold; font-size: 22px"></i>
        留言
      </div>
      <div>
        <!-- 文字评论 -->
        <div v-show="!isGraffiti">
          <CommentBox
            @showGraffiti="isGraffiti = !isGraffiti"
            @submitComment="submitComment"
          >
          </CommentBox>
        </div>
        <!-- 画笔 -->
        <!--        <div v-show="isGraffiti">-->
        <!--          <graffiti @showComment="isGraffiti = !isGraffiti"-->
        <!--                    @addGraffitiComment="addGraffitiComment">-->
        <!--          </graffiti>-->
        <!--        </div>-->
      </div>
    </div>

    <!-- 评论内容 -->
    <div v-if="comments.length > 0">
      <!-- 评论数量 -->
      <div class="commentInfo-title">
        <span style="font-size: 1.15rem">Comments | </span>
        <span>{{ total }} 条留言</span>
      </div>
      <!-- 评论详情 -->
      <div
        id="comment-content"
        class="commentInfo-detail"
        v-for="(item, index) in comments"
        :key="index"
      >
        <!-- 头像 -->
        <el-avatar
          shape="square"
          class="commentInfo-avatar"
          :size="35"
          :src="item.avatar"
        ></el-avatar>

        <div style="flex: 1; padding-left: 12px">
          <!-- 评论信息 -->
          <div style="display: flex; justify-content: space-between">
            <div>
              <span class="commentInfo-username">{{ item.username }}</span>
              <span class="commentInfo-master" v-if="item.userId === userId">主人翁</span>
              <span class="commentInfo-other">{{
                $common.getDateDiff(item.createTime)
              }}</span>
            </div>
            <div class="commentInfo-reply" @click="replyDialog(item, item)">
              <span v-if="item.childComments.total > 0"
                >{{ item.childComments.total }} </span
              ><span>回复</span>
            </div>
          </div>
          <!-- 评论内容 -->
          <div class="commentInfo-content">
            <span v-html="item.commentContent"></span>
          </div>
          <!-- 回复模块 -->
          <div
            v-if="
              !$common.isEmpty(item.childComments) &&
              !$common.isEmpty(item.childComments.records)
            "
          >
            <div
              class="commentInfo-detail"
              v-for="(childItem, i) in item.childComments.records"
              :key="i"
            >
              <!-- 头像 -->
              <el-avatar
                shape="square"
                class="commentInfo-avatar"
                :size="30"
                :src="childItem.avatar"
              ></el-avatar>

              <div style="flex: 1; padding-left: 12px">
                <!-- 评论信息 -->
                <div style="display: flex; justify-content: space-between">
                  <div>
                    <span class="commentInfo-username-small">{{
                      childItem.username
                    }}</span>
                    <span class="commentInfo-master" v-if="childItem.userId === userId"
                      >主人翁</span
                    >
                    <span class="commentInfo-other">{{
                      $common.getDateDiff(childItem.createTime)
                    }}</span>
                  </div>
                  <div>
                    <span class="commentInfo-reply" @click="replyDialog(childItem, item)"
                      >回复</span
                    >
                  </div>
                </div>
                <!-- 评论内容 -->
                <div class="commentInfo-content">
                  <template
                    v-if="
                      childItem.parentCommentId !== item.id &&
                      childItem.parentUserId !== childItem.userId
                    "
                  >
                    <span style="color: var(--blue)"
                      >@{{ childItem.parentUsername }} </span
                    >:
                  </template>
                  <span v-html="childItem.commentContent"></span>
                </div>
              </div>
            </div>
            <!-- 分页 -->
            <div
              class="pagination-wrap"
              v-if="item.childComments.records.length < item.childComments.total"
            >
              <div class="pagination" @click="toChildPage(item)">展开</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <ProPage
        :current="pagination.current"
        :size="pagination.size"
        :total="pagination.total"
        :buttonSize="6"
        :color="$constant.commentPageColor"
        @toPage="toPage"
      >
      </ProPage>
    </div>

    <div v-else class="myCenter" style="color: var(--greyFont)">
      <i>来发第一个留言啦~</i>
    </div>

    <el-dialog
      title="留言"
      v-model="replyDialogVisible"
      width="30%"
      :before-close="handleClose"
      :append-to-body="true"
      destroy-on-close
      center
    >
      <div>
        <CommentBox :disableGraffiti="true" @submitComment="submitReply"> </CommentBox>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import CommentBox from "@/pages/navbar/comment/CommentBox.vue";
import ProPage from "@/pages/navbar/common/ProPage.vue";
import { reqCommentCount, reqCommentList, reqSaveComment } from "@/api/comment";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();

const props = defineProps({
  source: {
    type: Number,
  },
  type: {
    type: String,
  },
  userId: {
    type: Number,
  },
});
const isGraffiti = ref(false);
const total = ref(0);
const replyDialogVisible = ref(false);
const floorComment = ref({});
const replyComment = ref({});
const comments = ref([]);
const pagination = reactive({
  current: 1,
  size: 10,
  total: 0,
  source: props.source,
  commentType: props.type,
  floorCommentId: null,
});

onMounted(() => {
  getComments(pagination);
  getTotal();
});

const toPage = (page) => {
  pagination.current = page;
  window.scrollTo({
    top: document.getElementById("comment-content").offsetTop,
  });
  getComments(pagination);
};

const getTotal = async () => {
  let result = await reqCommentCount(props.source, props.type);
  if (result.code == 200) {
    total.value = result.data;
  }
};

const toChildPage = (floorComment) => {
  // ... 略去分页逻辑部分，保持不变
};

const emoji = (comments, flag) => {
  comments.forEach((c) => {
    c.commentContent = c.commentContent.replace(/\n/g, "<br/>");
    c.commentContent = proxy.$common.faceReg(c.commentContent);
    c.commentContent = proxy.$common.pictureReg(c.commentContent);
    if (flag) {
      if (
        !proxy.$common.isEmpty(c.childComments) &&
        !proxy.$common.isEmpty(c.childComments.records)
      ) {
        c.childComments.records.forEach((cc) => {
          c.commentContent = c.commentContent.replace(/\n/g, "<br/>");
          cc.commentContent = proxy.$common.faceReg(cc.commentContent);
          cc.commentContent = proxy.$common.pictureReg(cc.commentContent);
        });
      }
    }
  });
};

const getComments = async (pagination, floorComment = {}, isToPage = false) => {
  let result = await reqCommentList(pagination);
  if (result.code == 200) {
    if (proxy.$common.isEmpty(floorComment)) {
      comments.value = result.data.records;
      pagination.total = result.data.total;
      emoji(comments.value, true);
    } else {
      if (isToPage === false) {
        floorComment.childComments = result.data;
      } else {
        floorComment.childComments.total = result.data.total;
        floorComment.childComments.records = floorComment.childComments.records.concat(
          result.data.records
        );
      }
      emoji.value(floorComment.childComments.records, false);
    }
  }
};

const addGraffitiComment = (graffitiComment) => {
  submitComment(graffitiComment);
};

const submitComment = async (commentContent) => {
  let comment = {
    source: props.source,
    type: props.type,
    commentContent: commentContent,
  };

  let result = await reqSaveComment(comment);
  if (result.code == 200) {
    let pagination = {
      current: 1,
      size: 10,
      total: 0,
      source: props.source,
      commentType: props.type,
      floorCommentId: null,
    };
    getComments();
    getTotal();
  } else {
    ElMessage({
      type: "error",
      message: "评论失败",
    });
  }
};

const submitReply = async (commentContent) => {
  let comment = {
    source: props.source,
    type: props.type,
    floorCommentId: replyComment.value.id,
    commentContent: commentContent,
    parentCommentId: replyComment.value.id,
    parentUserId: replyComment.value.userId,
  };

  let result = await reqSaveComment(comment);
  if (result.code == 200) {
    let pagination = {
      current: 1,
      size: 5,
      total: 0,
      source: props.source,
      commentType: props.type,
      floorCommentId: floorComment.value.id,
    };
    getComments(pagination, floorComment.value);
    getTotal();
  }
  handleClose();
};

const replyDialog = (comment, floorComment) => {
  console.log(floorComment);
  
  replyComment.value = comment;

  floorComment.value = floorComment;

  replyDialogVisible.value = true;
};

const handleClose = () => {
  replyDialogVisible.value = false;
  floorComment.value = {};
  replyComment.value = {};
};
</script>

<style scoped>
.comment-head {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  margin: 40px 0 20px 0;
  user-select: none;
  color: var(--themeBackground);
}

.commentInfo-title {
  margin-bottom: 20px;
  color: var(--greyFont);
  user-select: none;
}

.commentInfo-detail {
  display: flex;
}

.commentInfo-avatar {
  border-radius: 5px;
}

.commentInfo-username {
  color: var(--orangeRed);
  font-size: 16px;
  font-weight: 600;
  margin-right: 5px;
}

.commentInfo-username-small {
  color: var(--orangeRed);
  font-size: 14px;
  font-weight: 600;
  margin-right: 5px;
}

.commentInfo-master {
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: 0.2rem;
  font-size: 12px;
  padding: 2px 4px;
  margin-right: 5px;
}

.commentInfo-other {
  font-size: 12px;
  color: var(--greyFont);
  user-select: none;
}

.commentInfo-reply {
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  color: var(--white);
  background: var(--themeBackground);
  border-radius: 0.2rem;
  padding: 3px 6px;
}

.commentInfo-content {
  margin: 15px 0 25px;
  padding: 18px 20px;
  background: var(--commentContent);
  border-radius: 12px;
  color: var(--black);
  word-break: break-word;
}

.pagination-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.pagination {
  padding: 6px 20px;
  border: 1px solid var(--lightGray);
  border-radius: 3rem;
  color: var(--greyFont);
  user-select: none;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
}

.pagination:hover {
  border: 1px solid var(--themeBackground);
  color: var(--themeBackground);
  box-shadow: 0 0 5px var(--themeBackground);
}
</style>
